<template>
   <div class="article">
      <div class="ibox">
        <div class="ibox-content">
          <div class="acticle-com">
            <div class="listdetail"> 
              <div class="detail-title">
                <h2>{{detail.title}}</h2>
                <div>
                  <span>时间：{{detail.create_time}}</span>
                   <!--      <span>来源：未知 </span> -->
                 <!--  <span>作者：{{detail.author}}</span> -->
                  <span>点击：{{detail.click}}次</span>
                </div>
              </div>
              <hr>
              <div class="detail-content" v-html="detail.content">
                              
              </div>
            </div>
          </div>
          <div class="comment">
            <h2>评论</h2>
            <div class="comment_text">
              <textarea class="tweet-editor"  v-model="content" placeholder="发送动态" bind=""></textarea>
              <el-button type="primary" @click="submitComment"  icon="el-icon-edit">评论</el-button>
            </div>
            <div class="social-feed-box" v-for="(item,index) in comment">
              <div class="social-avatar">
                <div class="media-body">
                  <a href="#">
                    {{item.customer_name}}
                  </a>
                  <small class="text-muted">{{item.create_time}}</small>
                </div>
              </div>
              <div class="social-body">
                <p>
                  {{item.content}}
                </p>
              </div>
              <div class="reply">
                <el-badge class="item">
                  <el-button size="small">点赞{{item.likes}}</el-button>
                </el-badge>
                <!-- <el-badge :value="comment[index].reply.length" class="item" style="padding-left:20px">
                  <el-button size="small" @click="showinput(index)">回复</el-button>
                </el-badge>
                <el-input v-if="input === index" v-model="item.value" placeholder="请输入回复内容" style="margin-top:10px">
                  <el-button @click="hanldReply(index)" slot="append" icon="el-icon-edit"></el-button>
                </el-input> -->
              </div>
              <!-- <div class="reply_content" v-for="(item,key) in item.reply">
                <div class="social-avatar">
                  <div class="media-body">
                    <a href="#">
                      {{item.customer_name}}
                    </a>
                    <small class="text-muted">{{item.create_time}}</small>
                  </div>
                </div>
                <div class="social-body">
                  <p>
                    {{item.reply_content}}
                  </p>
                </div>
              </div> -->
            </div>                     
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        input:-1,
        reply_content:[],
        articleId:0,
        content: '',
        detail:{},
        comment:[]
      }
    },
    mounted () {
      this.articleId = this.$route.params.id;
      this.getDatas();
      this.getComment()
    },
    methods: {
      getDatas(){
        let params = {
          article_id: this.articleId,
        };
        this.$api.getArticledatail(params)
         .then(res => {
           console.log(res)
            this.detail = res.data
         })
      },
      getComment(){
        let params = {
          article_id: this.articleId,
        };
        this.$api.getComment(params)
         .then(res => {
            this.comment = res.data
         })
      },
      showinput(index){
         this.input = index
      },
      hanldReply(index){
        let params = {
          article_id: this.articleId,
          reply_id: this.comment[index].message_id,
          message_id: this.comment[index].message_id,
          to_user_id: this.comment[index].user_id,
          content:this.comment[index].value,
        };
        this.$api.submitReply(params)
         .then(res => {
           console.log(res)
            this.getDatas()
            this.content = ""
            this.$message({
              message: '回复成功',
              type: 'success'
            });
         })
       },
      submitComment(){
        let params = {
          article_id: this.articleId,
          content:this.content,
        };
        this.$api.submitMessage(params)
         .then(res => {
           console.log(res)
            this.getDatas()
            this.content = ""
            this.$message({
              message: '评论成功',
              type: 'success'
            });
         })
      }
    },
    components: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>

@import './index.less';

</style>